<script setup>
import { ref } from 'vue'
import { useImageMetadata } from '@vueuse/core'

const props = defineProps({
  photos: Array
})

const selectedPhotos = ref(new Set())

// EXIF元数据解析
async function loadMetadata(url) {
  const { metadata } = await useImageMetadata(url)
  return {
    camera: metadata.exif?.Model || '未知',
    gps: metadata.exif?.GPSPosition || '未记录'
  }
}
</script>

<template>
  <div class="photo-grid">
    <div 
      v-for="(photo, index) in photos"
      :key="index"
      class="photo-item"
      @click="toggleSelection(photo.id)"
    >
      <img :src="photo.url" />
      <div class="metadata-overlay">
        <p>{{ photo.date }}</p>
        <p v-if="photo.metadata">{{ photo.metadata.camera }}</p>
      </div>
    </div>
  </div>
</template>